<template>
  <el-dialog
    :title="modalData.code ? '编辑用户' : '新增用户'"
    :visible="visible"
    :center="true"
    @close="onClose"
    @open="onOpen"
  >
    <el-form
      :ref="refName"
      :model="ruleForm"
      :rules="rules"
      status-icon
      label-width="100px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="ruleForm.realName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="用户手机" prop="mobile">
        <el-input
          v-model="ruleForm.mobile"
 
          placeholder="请输入用户手机"
        />
      </el-form-item>
      <el-form-item label="用户类型" prop="roleCode">
        <el-select v-model="ruleForm.roleCode" placeholder="请选择用户类型">
          <el-option
            v-for="roleItem in roleList"
            :key="roleItem.code"
            :label="roleItem.roleAlias"
            :title="roleItem.remark"
            :value="roleItem.code"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="所属公司" prop="companyCode">
        <el-select v-model="ruleForm.companyCode" placeholder="请选择公司">
          <el-option
            v-for="compItem in companyList"
            :key="compItem.code"
            :label="compItem.companyName"
            :title="compItem.remark"
            :value="compItem.code"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="说明" prop="remark">
        <el-input v-model="ruleForm.remark" placeholder="请输入说明" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('onClose')">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    }
  },

  data() {
    const validatePhone = (rule, value, callback) => {
      if (value) {
        const pwdRegEn = /^1[3456789]\d{9}$/
        if (!pwdRegEn.test(value)) {
          callback(new Error('请输入正确的电话号码'))
          return
        }
      }
      callback()
    }

    return {
      refName: 'ruleForm',
      ruleForm: {},
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 20, message: '用户名不能超过20位', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '姓名不能操作20位', trigger: 'blur' }
        ],
        mobile: [{ validator: validatePhone, trigger: 'blur' }],
        roleCode: [
          { required: true, message: '请选择用户类型', trigger: 'blur' }
        ],
        companyCode: [
          { required: true, message: '请选择公司', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState('common', ['companyList', 'roleList']),
    ...mapGetters(['modalKey', 'modalData', 'loading'])
  },

  mounted() {
    setTimeout(() => {
      this.$store.dispatch('common/getRoleList')
      this.$store.dispatch('common/getCompanyList')
    }, 1000)
  },

  methods: {
    submitForm(ruleForm) {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }
        this.$store.dispatch('userMg/onEditUser', this.ruleForm)
      })
    },
    onClose() {
      this.$emit('onClose')
      this.ruleForm = {}
      this.$refs[this.refName].resetFields()
    },
    onOpen() {
      this.ruleForm = Object.assign({}, this.modalData)
    }
  }
}
</script>
